<template>
  <div class="mymessage">
    <vheader pageTitle="我的消息"></vheader>
    <div class="mymessage-container" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" id="js_hook">
      <mt-cell-swipe 
        v-for="(data, index) in dataList"
        key="index"
        :right="getRight(data, index)">
        <p class="mymessage-title" :style="{color: data.status === '0' ? '#ff4133' : '#333'}" @click="toggle(data, $event)">[{{ data.messageTitle }}] {{ data.messageContent }}</p>
        <!--<span :style="{color: data.isRead === 0 ? '#ff6c00' : '#333'}" class="mymessage-date">{{ data.sendDate }}</span>-->
        <div v-html="data.messageContent" class="mymessage-content"></div>
      </mt-cell-swipe>
      <div class="mymessage-loading">
        <mt-spinner :type="3" v-show="loading" v-if="!noData"></mt-spinner>
      </div>
      <div class="mymessage-allloaded" v-show="allLoaded" v-if="!noData">没有更多数据了...</div>
      <nodata v-if="noData"></nodata>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import { CellSwipe, Toast, Indicator, Spinner } from 'mint-ui'
  import nodata from 'components/common/noData'

  export default {
    data () {
      return {
        acctKey: '',
        dataList: [],
        loading: false,
        pageSize: 12,
        pageOffset: 1,
        totalPage: 999,
        allLoaded: false,
        noData: false
      }
    },
    methods: {
      getRight (data, index) {
        return [{
          content: '删除',
          style: { background: 'red', color: '#fff' },
          handler: () => this.delete(data, index)
        }]
      },
      // 切换显示状态
      toggle (data, e) {
        const target = e.target
        const parentNode = target.parentNode
        const contentNode = parentNode.children[1]
        if (contentNode.style.display !== 'block') {
          contentNode.style.display = 'block'
        } else {
          contentNode.style.display = 'none'
        }
        if (data.isRead) {
          return
        } else {
          target.style.color = '#333' // 标为已读
          parentNode.children[1].style.color = '#333' // 标为已读
          this.hasRead(data)
        }
      },
      // 删除信息
      delete (data, index) {
        const acctKey = this.acctKey
        const uuid = data.uuid
        Indicator.open('删除中')
        this.$http.post(`/api/member/memberMessageDelete?uuid=${uuid}&acctKey=${acctKey}`)
        .then((res) => {
          if (res.data.success) {
            Indicator.close()
            this.dataList.splice(index, 1) // 删除消息
            Toast('删除成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      },
      // 标为已读
      hasRead (data) {
        const acctKey = this.acctKey
        const uuid = data.uuid

        this.$http.get(`/api/member/memberMessageView`, {
          params: {
            uuid,
            acctKey
          }
        })
        .then((res) => {
          if (res.data.success) {
            return
          } else {
            console.log(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
      },
      loadMore () {
        this.acctKey = this.getUserCookie('acctKey')
        if (this.allLoaded) {
          return
        }
        this.loading = true
        if (this.pageOffset === (this.totalPage + 1)) {
          this.allLoaded = true
          this.loading = false
          document.getElementById('js_hook').style.paddingBottom = '0px'
          return
        }
        this.$http.get(`/api/member/memberMessageList?acctKey=${this.acctKey}&numPerPage=${this.pageSize}&currentPage=${this.pageOffset}`)
          .then((res) => {
            if (res.data.success) {
              if (res.data.data.list.length === 0) {
                this.allLoaded = true
                this.loading = false
                document.getElementById('js_hook').style.paddingBottom = '0px'
                this.noData = true
                return
              }
              res.data.data.list.forEach((item) => {
                this.dataList.push(item)
              })
              this.totalPage = res.data.data.totalPage
              console.log(this.totalPage)
              this.loading = false
              this.pageOffset++
            } else {
              this.allLoaded = true
              this.loading = false
              document.getElementById('js_hook').style.paddingBottom = '0px'
              console.log(res.data.msg)
              this.loading = false
            }
          })
          .catch((err) => {
            console.log(err)
            this.loading = false
          })
      }
    },
    components: {
      vheader,
      mtCellSwipe: CellSwipe,
      Toast,
      mtSpinner: Spinner,
      nodata
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .mymessage {
    font-size: 24px;
    text-align: center;
    background: $base-f8f8f8;
    &-title {
      width: 700px;
      font-size: 30px;
      color: $base-333;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      line-height: 108px;
      padding-left: 20px;
    }
    &-date {
      font-size: 24px;
      color: $base-666;
    }
    &-content {
      display: none;
      font-size: 24px;
      color: $base-666;
      margin-bottom: 20px;
      text-indent: 2em;
      line-height: 30px;
    }
    // 清除mint-ui中不需要的样式
    & .mint-cell-title {
      display: none;
    }
    & .mint-cell-wrapper {
      padding: 0;
    }
    & .mint-cell-value {
      flex-wrap: wrap;
    }
    &-container {
      padding-bottom: 80px;
    }
    &-loading {
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-allloaded {
      height: 80px;
      color: $base-e5e5e5;
    }
  }
</style>
